<template>
  <div class="interview-wrap">

    <div class="entry-tip" v-if="restRemark">{{restRemark}}</div>

    <div class="interview-box" v-if="showData == 1" v-for="(item,index) in interviewList" :key="index">
      <div class="inter-con1">
        <div class="logo-pic">
          <img :src="item.mechanismUrl?item.mechanismUrl:require('./pic.png')" class="pic1"/>
        </div>
        <div class="company-box">
          <span class="name">{{item.mechanismName}}</span>
          <div class="post-box">
            <span class="post">{{item.workName}}</span>
            <span class="money" v-if="item.postType == 1">{{item.workMoney}}元/小时</span>
            <span class="money" v-if="item.postType == 0">{{item.wageRange}}元/月</span>
          </div>
          <div class="full-box">
            <span class="number">招{{item.maxNumber}}人&nbsp;</span><span class="number" v-if="item.recruitStatus != 1">/&nbsp;已报名{{item.applyNumber}}人</span>
            <span class="full" v-if="item.recruitStatus == 1">待招聘</span>
          </div>
        </div>
        <div class="back-box" @click="openRecruit(item.workId)">
          <img src="./back.png" class="pic2" onclick="return false"/>
        </div>
      </div>

      <div class="inter-con2">
        <div class="status-box">
          招聘状态：<span
          :class="{'status1':item.status==0,'status3':(item.status==1 || item.status==5),'status2':(item.status==2 || item.status==3 || item.status==4)}">{{item.status | changeStatus}}</span>
        </div>

        <div class="entry-fee" v-if="item.status==5 || item.status==4 || item.status==1">
          <div class="fee-title" v-if="item.reMoney > 0">返费金额：<span class="fee-box">{{item.reMoney}}元/月</span></div>
          <div class="fee-title" v-if="item.reTime">返费时间：<span class="fee-box">{{item.reTime}}个月</span></div>
        </div>
        <div class="entry-fee" v-else>
          <span class="time">面试时间：{{item.interviewTime}}</span>
          <div class="address-box">
            <span>面试地点：</span><span class="address">{{item.recruitAddress}}</span>
          </div>
        </div>

        <div class="teach-box" v-for="(teach,index) in item.teacherList" :key="index"
             v-if="item.teacherList.length">
          <span>驻厂老师：{{teach.teacherName}}&nbsp;{{teach.teacherTel}}</span>
        </div>

        <div class="less-day" v-if="item.status == 0">
          <span>有效时间：</span><span class="day-tip">{{item.restTime}}</span>
        </div>
      </div>

      <div class="inter-con3">
        <span class="apply-time">报名时间：{{item.time | format}}</span>
        <div class="btn-box">
          <button class="share" type="button" @click="share(item.id)" v-if="item.status == 0">分享</button>
          <button class="cancel" type="button" @click="evaluatePage(item.id)"
                  v-if="item.remarkStatus == 1 || item.remarkStatus == 2">评价
          </button>
          <button class="cancel" type="button" @click="mineEvaluate(item.id,item.remarkStatus)"
                  v-if="item.remarkStatus == 3 || item.remarkStatus == 4">我的评价
          </button>
          <button class="cancel" type="button" @click="openModal(item.workId)" v-if="item.status == 0">取消报名</button>
          <button class="del" type="button" @click="deleteInterview(item.id)" v-else>{{item.status == 1?'放弃入职':'删除'}}
          </button>
        </div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty"/></div>
        <div class="tip">您还没有面试预约信息，赶紧去预约吧！</div>
      </div>
    </div>

    <v-dialog v-model="sendVal" content="请问是否确认取消报名？" cancelText="取消" confirmText="确认" @confirm="cancelApply"
              @cancel="close"></v-dialog>

    <back-page @backPage="back"></back-page>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import {formatDate, setSessionStore} from "../../common/js/util"
  import dialog from "../../components/dialog/dialog"
  import backPage from "../../components/backpage"

  export default {
    inject: ['reload'],
    data() {
      return {
        showData: 0,
        interviewList: [],
        workId: "",
        sendVal: false,
        restRemark: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.queryInterview();
    },
    methods: {
      openRecruit(id) {//招工详情
        setSessionStore("interviewType", 1);
        this.$router.push({path: "/recruitdetail", query: {"id": id}});
      },
      queryInterview() {//查询面试预约列表
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work/query_workorderlist?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.interviewList = resultObj.data;
              this.restRemark = resultObj.data[0].restRemark;
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      share(id) {//分享
        this.$router.push({path: '/referral', query: {"interviewId": id}});
      },
      deleteInterview(id) {//删除
        this.$vux.loading.show({
          text: '加载中',
        });

        this.axios.get(baseUrl + "/work/del_workorder?sgin=" + this.userSign + "&workOrderId=" + id).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.reload();
              this.$vux.toast.text("删除失败，请重试！", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openModal(index) {
        this.workId = index;
        this.sendVal = true;
      },
      close() {
        this.sendVal = false;
      },
      cancelApply() {//取消报名
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {};
        this.axios.post(baseUrl + "/work/cancleApply?sgin=" + this.userSign + "&workId=" + this.workId, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.reload();
              this.$vux.toast.text("取消报名失败,请稍后重试!", "middle");
            } else {
              this.sendVal = false;
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      back() {//返回
        this.$router.push({path: "/entry"});
      },
      mineEvaluate(id, type) {//我的评价
        if (type == 4) {
          this.$router.push({path: "/delevaluate", query: {"deviceType": 1}});
        } else {
          this.$router.push({path: "/entryevaluateedit", query: {"evaluateId": id, "deviceType": 1}});
        }
      },
      evaluatePage(id) {//评价
        this.$router.push({path: "/entryevaluate", query: {"evaluateId": id, "deviceType": 1}});
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
      changeStatus(type) {
        let temp = "";
        if (type == 0) {
          temp = "面试预约中";
        } else if (type == 1) {
          temp = "面试通过";
        } else if (type == 2) {
          temp = "面试失败";
        } else if (type == 3) {
          temp = "已招满";
        } else if (type == 4) {
          temp = "放弃入职";
        } else if (type == 5) {
          temp = "入职成功";
        }
        return temp;
      }
    },
    components: {
      "v-dialog": dialog,
      backPage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .interview-wrap
    wh(100%, 100%)
    overflow-y: auto
    background: rgba(242, 242, 242, 1)
    .entry-tip
      fj(center, center)
      wh(100%, 0.8rem)
      background: rgba(255, 244, 224, 1)
      border-bottom: 0.027rem solid rgba(255, 210, 127, 1)
      size-color(0.347rem, rgba(250, 171, 25, 1))
    .interview-box
      wh(100%, auto)
      overflow: hidden
      background: rgba(255, 255, 255, 1)
      margin-bottom: 0.267rem
      .inter-con1
        display: flex
        align-items: center
        wh(100%, 2.667rem)
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        .logo-pic
          position: relative
          margin-left: 0.32rem
          margin-right: 0.36rem
          wh(2.133rem, 1.6rem)
          .pic1
            wh(100%, 100%)
            border-radius(0.16rem)
        .company-box
          display: flex
          flex-direction: column
          .name
            size-color(0.4rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .post-box
            padding-top: 0.333rem
            padding-bottom: 0.213rem
            .post
              size-color(0.373rem, rgba(60, 175, 255, 1))
              font-weight: 500
              padding-right: 0.32rem
            .money
              size-color(0.373rem, rgba(255, 89, 89, 1))
              font-weight: 500
          .full-box
            display: flex
            align-items: center
            .number
              size-color(0.32rem, rgba(153, 153, 153, 1))
            .full
              margin-left: 0.15rem
              padding: 0.04rem 0.107rem
              line-height: 0.373rem
              size-color(0.293rem, rgba(255, 255, 255, 1))
              font-weight: 500
              background: rgba(255, 142, 89, 1)
              border-radius: 0.053rem
        .back-box
          margin-left: auto
          margin-right: 0.2rem
          wh(0.48rem, 0.48rem)
          .pic2
            wh(100%, 100%)
      .inter-con2
        display: flex
        flex-direction: column
        wh(100%, auto)
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        .status-box
          margin-left: 0.36rem
          margin-top: 0.347rem
          margin-bottom: 0.267rem
          size-color(0.373rem, rgba(102, 102, 102, 1))
        .status1
          font-weight: 500
          color: #FABF48
        .status2
          font-weight: 500
          color: #ff5353
        .status3
          font-weight: 500
          color: $color
        .entry-fee
          display: flex
          flex-direction: column
          .time
            padding-bottom: 0.267rem
            margin-left: 0.36rem
          .fee-title
            padding-bottom: 0.267rem
            margin-left: 0.36rem
            size-color(0.373rem, rgba(102, 102, 102, 1))
            .fee-box
              color: #3CAFFF
          .address-box
            margin-left: 0.36rem
            padding-bottom: 0.267rem
            .address
              margin-right: 0.32rem
              line-height: 0.4rem
        span
          size-color(0.373rem, rgba(102, 102, 102, 1))
        .teach-box
          display: flex
          flex-direction: column
          margin-left: 0.36rem
          padding-bottom: 0.333rem
          span
            padding-bottom: 0.267rem
            &:last-child
              padding-bottom: 0
        .less-day
          margin-left: 0.36rem
          margin-bottom: 0.36rem
          margin-right: 0.32rem
          size-color(0.373rem, rgba(102, 102, 102, 1))
          line-height: 0.44rem
          .day-tip
            color: #FF5959

      .inter-con3
        display: flex
        align-items: center
        justify-content: space-between
        wh(100%, 0.987rem)
        .apply-time
          margin-left: 0.36rem
          size-color(0.347rem, rgba(153, 153, 153, 1))
        .btn-box
          margin-right: 0.32rem
          .cancel
            margin-left: 0.267rem
            wh(1.92rem, 0.64rem)
            line-height: 0.64rem
            @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.32rem
            }
            @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.32rem
            }
            @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            border: 0.027rem solid rgba(60, 175, 255, 1)
            border-radius(0.32rem)
            size-color(0.347rem, rgba(60, 175, 255, 1))
            background: #FFF
          .share
            wh(1.333rem, 0.64rem)
            line-height: 0.64rem
            @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.32rem
            }
            @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.32rem
            }
            @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            border: 0.027rem solid rgba(60, 175, 255, 1)
            border-radius(0.32rem)
            size-color(0.347rem, rgba(60, 175, 255, 1))
            background: #FFF
          .del
            margin-left: 0.267rem
            wh(1.92rem, 0.64rem)
            line-height: 0.64rem
            @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.32rem
            }
            @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.32rem
            }
            @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.32rem
            }
            border: 0.027rem solid rgba(128, 128, 128, 1)
            border-radius(0.32rem)
            size-color(0.347rem, rgba(128, 128, 128, 1))
            background: #FFF
    .empty-wrap
      fj(center, center)
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      wh(100%, auto)
      background: #FFF
      .empty-box
        display: flex
        flex-direction: column
        align-items: center
        .img-box
          wh(3.227rem, 3.227rem)
          .empty
            wh(100%, 100%)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
</style>
